<template>
  <view class="formBox">
    <uni-forms
      ref="valiForm"
      :rules="rules"
      v-model="formData"
      label-position="top"
      label-width="150"
    >
      <uni-collapse ref="collapse">
        <uni-collapse-item :title="`复查`" :open="true">
          <uni-forms-item label="复查时间" required name="recheckTime">
            <uni-datetime-picker
              type="datetime"
              v-model="formData.recheckTime"
            />
          </uni-forms-item>
          <uni-forms-item label="复查结果" required name="recheckResult">
            <uni-data-checkbox
              v-model="formData.recheckResult"
              :localdata="recheckResult"
            />
          </uni-forms-item>
          <uni-forms-item label="复查附件" required name="recheckOssIdArr">
            <FileUploader v-model="formData.recheckOssIdArr" />
          </uni-forms-item>
        </uni-collapse-item>
      </uni-collapse>
    </uni-forms>
    <button class="btn" type="primary" @click="onSubmit('valiForm')">
      提交
    </button>
  </view>
</template>

<script>
import _ from 'lodash';
import { getRoomCheckDetailAllList } from '@/api/room';
import useAppStore from '@/store/modules/app';
import FileUploader from '@/components/FileUploader/index.vue';
export default {
  components: {
    FileUploader,
  },
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      buildingCheckResult: [
        {
          label: '优',
          text: '优',
          value: '1',
        },
        {
          label: '良',
          text: '良',
          value: '2',
        },
        {
          label: '中',
          text: '中',
          value: '3',
        },
        {
          label: '差',
          text: '差',
          value: '3',
        },
      ],
      zgStatus: [
        {
          label: '否',
          text: '否',
          value: '2',
        },
        {
          label: '是',
          text: '是',
          value: '1',
        },
      ],
      recheckResult: [
        {
          label: '通过',
          text: '通过',
          value: '1',
        },
        {
          label: '未通过',
          text: '未通过',
          value: '2',
        },
      ],
      cdData: [{}, {}, {}],
      // 表单数据
      formData: {},
      // 规则
      rules: {
        recheckTime: {
          rules: [
            {
              required: true,
              errorMessage: '请选择复查时间',
            },
          ],
        },
        recheckResult: {
          rules: [
            {
              required: true,
              errorMessage: '请选择复查结果',
            },
          ],
        },
        recheckOssIdArr: {
          rules: [
            {
              required: true,
              errorMessage: '请选择复查附件',
            },
          ],
        },
      },
      // store
      appStore: useAppStore(),
    };
  },
  watch: {
    // data: {
    //   handler(newVal) {
    //     if (!_.isEmpty(newVal)) {
    //       // 数据合并
    //       this.formData = Object.assign({}, this.formData, {
    //         ...newVal,
    //         ossIdArrStr: newVal.ossIdArrStr || [],
    //         rectifyOssIdArrStr: newVal.rectifyOssIdArrStr || [],
    //       });
    //       // 获取数据
    //       this.initData();
    //     }
    //   },
    //   immediate: true,
    //   deep: true,
    // },
  },
  created() {
    this.formData.recheckTime = this.$util.timestampToTime(
      new Date().getTime()
    );
  },
  methods: {
    // 初始数据
    async initData() {
      await getRoomCheckDetailAllList({
        buildingCheckId: this.formData.buildingCheckId,
      }).then((res) => {
        this.cdData = res.data;
      });
      // #ifdef MP-WEIXIN
      this.$nextTick(() => {
        this.$refs.collapse.resize();
      });
      // #endif
    },
    // 明细结果选择
    onChange(e, i) {
      this.cdData[i].buildingCheckItemResult =
        this.buildingCheckResult[e.detail.value].value;
    },
    // 提交
    onSubmit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          console.log(res);

          res.recheckOssIdArrStr = res.recheckOssIdArr
            .map((v) => v.ossId)
            .join(',');
          this.$emit('callback', res);
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.formBox {
  height: 60vh;
  padding: 60rpx 48rpx 100rpx;
  border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  overflow: auto;
  ::v-deep .uni-collapse-item__wrap {
    overflow: auto !important;
  }
  .uni-forms {
    min-height: 38vh;
  }
  .cdBox {
    padding: 10rpx 40rpx;
    margin-bottom: 20rpx;
    background: #e8e8e8;
    border-radius: 10rpx;
    .cdItem {
      padding: 10rpx 0;
      display: flex;
      justify-content: space-between;
      .l {
        width: 35%;
      }
      .r {
        width: 65%;
        text-align: right;
        &.justify {
          text-align: justify;
        }
      }
    }
    .cdItemImg {
      padding: 10rpx 0;
      .r {
        padding-top: 10rpx;
        display: flex;
        flex-wrap: wrap;
        .img {
          width: 18%;
          margin-right: 2.5%;
          &:nth-child(5n) {
            margin-right: 0;
          }
          img {
            display: inline-block;
            width: 100%;
            height: 100rpx;
          }
        }
      }
    }
    .pickerText {
      text-align: left;
      padding: 0 10px;
      border-radius: 8rpx;
      background: #fff;
    }
  }
}
</style>
